<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*浮动布局*/
        .float-left-right-center > div {
            min-height: 150px;
            margin-bottom: 10px;
        }

        .float-left-right-center .left {
            float: left;
            width: 300px;
            background-color: yellow;
        }

        .float-left-right-center .right {
            float: right;
            width: 300px;
            background-color: pink;
        }

        .float-left-right-center .center {
            background-color: blue;
        }

        /*定位布局*/
        .position-left-right-center > div {
            min-height: 150px;
            position: absolute;
        }

        .position-left-right-center .left {
            left: 0;
            width: 300px;
            background-color: yellow;
        }

        .position-left-right-center .right {
            right: 0;
            width: 300px;
            background-color: pink;
        }

        .position-left-right-center .center {
            right: 300px;
            left: 300px;
            background-color: blue;
        }
        /*flex布局*/
        .flex-left-right-center  {
            min-height: 150px;
            display: flex;
            margin-bottom: 10px;
        }

        .flex-left-right-center .left {
            width: 300px;
            background-color: red;
        }

        .flex-left-right-center .right {
            width: 300px;
            background-color: pink;
        }

        .flex-left-right-center .center {
            flex: 1;
            background-color: blue;
        }
    </style>
</head>
<body>
<!--浮动-->
<article class="float-left-right-center">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">

    </div>
    <!--    定位-->
</article>
<article class="position-left-right-center">
    <div class="left"></div>
    <div class="center"></div>

        <div class="right"></div>

    </div>
</article>
<!--flex布局-->
<article class="flex-left-right-center">
    <div class="left"></div>
    <div class="center"></div>

    <div class="right"></div>

    </div>
</article>
<!--表格布局-->
<section class="layout table">
    <style>
        .layout.table .left-center-right {
            display: table;
            height: 150px;
            width: 100%;
        }
        .layout.table .left-center-right>div {
            display: table-cell;
        }
        .layout.table .left {
            width: 300px;
            background: red;
        }
        .layout.table .center {
            background: yellow;
        }
        .layout.table .right {
            width: 300px;
            background: blue;
        }
    </style>
    <h1>三栏布局</h1>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h2>表格布局解决方案</h2>
            1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
        </div>
        <div class="right"></div>
    </article>
</section>
<!--网格布局-->
<section class="layout grid">
    <style>
        .layout.grid .left-center-right {
            display: grid;
            width: 100%;
            grid-template-columns: 300px auto 300px;
            grid-template-rows: 150px;//行高
        }
        .layout.grid .left {
            background: red;
        }
        .layout.grid .center {
            background: yellow;
        }
        .layout.grid .right {
            background: blue;
        }
    </style>
    <h1>三栏布局</h1>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
            <h2>网格布局解决方案</h2>
            1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案； 3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案； 5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
        </div>
        <div class="right"></div>
    </article>
</section>


</body>
</html>